<template>
  <!-- 顶部导航 -->
  <van-nav-bar
    title="推荐"
    left-text="返回"
    left-arrow
    @click="this.$router.go(-1)"
  />
  <van-pull-refresh class="home-main" v-model="refreshing" @refresh="onRefresh">
    <van-list
      v-model:loading="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="initProductsData"
    >
      <product-list
        :products-data="productsData"
      ></product-list>
    </van-list>
  </van-pull-refresh>
  
  <!-- 公共底部 -->
  <layout-footer></layout-footer>
</template>
<script setup>
import LayoutFooter from '@/components/LayoutFooter.vue'
import ProductList from '@/components/ProductList.vue'
import { ref, computed } from 'vue'
import { getProductsData } from '@/api/product'

// ---- 商品功能 ----
// 存储商品列表数据
const productsData = ref([])
const loading = ref(false)
const finished = ref(false)

let page = 1
let limit = 4
// 请求指定页的商品数据
const initProductsData = async () => {
  const { data } = await getProductsData({
    limit,
    page
  })
  if (data.status !== 200) { return }
  // 请求每次得到的是新一段数据，需要将新数据添加到 productsData 中
  productsData.value.push(...data.data)

  // 将本次加载状态更改为完成
  loading.value = false

  // 判断是否已经加载完全部数据
  if (data.data.length < limit) {
    finished.value = true
    return
  }

  // 变更页数，准备下次数据请求
  page++
}
// 使用 List 组件后，会自动根据触底情况加载首屏以及后续数据
// --所以需要删除手动调用的 initProductsData()
// initProductsData()

// ---- 下拉刷新功能 ----
const refreshing = ref(false)

const onRefresh = () => {
  // 1 清空数据
  indexData.value = {}
  productsData.value = []
  // 2 页码还原
  page = 1
  // 3 触底加载的状态还原
  loading.value = false
  finished.value = false
  // 4 重新发送请求
  initIndexData()
  initProductsData()
}

</script>
<style lang="scss" scoped>

</style>